<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ACE Editor with SQL Syntax Validation</title>
    <script src="./script/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/mode-mysql.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/theme-github_dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="./script/sql-formatter.min.js"></script>
</head>
<body>
    <div id="editor" style="height: 400px; width: 600px;"></div>

    <script type="module">
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github");
        editor.session.setMode("ace/mode/mysql");

        editor.setValue("SELECT * FROM user; WHERE id = 1;");

        function validateSQL() {
            var code = editor.getValue();
            var annotations = [];
            annotations.push({
                row: 0, // ACE 使用 0 基索引
                column: 20,
                text: '数据错误',
                type: 'error'
            });
            annotations.push(
                {
                    row: 4, // ACE 使用 0 基索引
                    column: 2,
                    text: '数据不对额',
                    type: 'warning'
                }
            )

            editor.session.setAnnotations(annotations);
        }

        // 监听编辑器内容变化
        editor.session.on('change', function() {
            validateSQL();
        });

        // 初始校验
        validateSQL();
    </script>
</body>
</html>
